 <template>
   <div class="Banner3-component">
        <div class="swiper-container gallery-top ">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img :src="require('../../static/images/ping1.jpg')">
                </div>
                <div class="swiper-slide">
                    <img :src="require('../../static/images/ping2.jpg')">
                </div>
                <div class="swiper-slide">
                    <img :src="require('../../static/images/ping3.jpg')">
                </div>
                <div class="swiper-slide">
                    <img :src="require('../../static/images/ping4.jpg')">
                </div>
            </div>
            <div class="swiper-button-prev swiper-button-black"></div>
            <div class="swiper-button-next swiper-button-black"></div>
        </div>
        <div class="mengban">
            <div class="tit">
                <span>
                    展示图
                </span>
            </div>
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide ">
                        <img :src="require('../../static/images/ping1.jpg')">
                    </div>
                    <div class="swiper-slide ">
                        <img :src="require('../../static/images/ping2.jpg')">
                    </div>
                    <div class="swiper-slide ">
                        <img :src="require('../../static/images/ping3.jpg')">
                    </div>
                     <div class="swiper-slide ">
                        <img :src="require('../../static/images/ping4.jpg')">
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>
</template>

<script>
import Swiper from '../../static/js/swiper-3.4.2.min'
import $ from '../../static/js/jquery.min'
export default {
	components:{
		
	},
    data(){
        return{

        }
    },
    mounted(){
       
    var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        autoHeigth:true,
        // onlyExternal : true,
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 20,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        // onlyExternal : true,
        // simulateTouch : false,
        // noSwiping : true,
    });
    // galleryTop.params.control = galleryThumbs;
    // galleryThumbs.params.control = galleryTop;
    

   
    
    },
}
</script>

<style lang="scss">
    @import "../style/base/_base";
    @import "../../static/css/swiper-3.4.2.min.css";
.Banner3-component{
    position: relative;
   .swiper-container {
         width: 600px;
        .swiper-slide{
            img{
                width:100%;
            }
        }
    }
    .mengban{
        width: 100%;
        height: 70px;
        position: absolute;
        bottom: 0;
        z-index: 10;
        background-color:rgba(0,0,0, 0.4);
        .tit{
            position: absolute;
            bottom: 26px;
            left: 30px;
            span{
                font-size: 18px;
                color: #fff;
            }
        }
    }
    .gallery-thumbs{
        position: absolute;
        right: 0;
        width: 500px;
        height: 70px;
        .swiper-wrapper{
            @include vertical-centering;
             .swiper-slide{
                width: 62px;
                height: 45px;
                img{
                    width: 62px;
                    height: 45px;
                    border-radius: 5px;
                }
            }
            .swiper-slide-active{
                border: 2px solid #fff;
                border-radius: 5px;
            }
        }
     
    }
}
</style>